{extend name="public:layout" /}
{block name="title"}商品内容列表{/block}
{block name="head"}{/block}
{block name="body"}
<div id="category_tree">
    <div id="tree_title">
        <span></span>
        <a href="javascript:;" onclick="get_category_tree();" target="content">刷新栏目</a>
    </div>
    <ul id="tree" class="ztree" style="top:25px;position: absolute;"></ul>
</div>
<div id="content">
    <iframe src="{:url('Index/main')}" name="content" scrolling="auto" frameborder="0" style="height:100%;width: 100%;"></iframe>
</div>
<link rel="stylesheet" href="/public/plugins/ztree/css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="/public/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<style type="text/css">
    div#category_tree{
        font-size:12px;
    }
    div#tree_title a {
        color: #333;
    }
    /*左侧栏目*/
    div#category_tree {
        width: 180px;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: solid 1px #DDDDDD;
    }
    /*右侧内容显示区*/
    div#content {
        position: fixed;
        left: 190px;
        right: 0px;
        bottom: 0px;
        top: 0px;
        padding:0px;
    }
    #tree_title {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    #tree_title span {
        display: block;
        background: url("/public/plugins/ztree/css/zTreeStyle/img/diy/1_open.png");
        width: 15px;
        height: 15px;
        float: left;
        margin-right: 5px;
    }
</style>
{/block}
{block name="script"}
<script type="text/javascript" charset="utf-8">
    $(function(){
        get_category_tree();
    });
    //显示左侧栏目列表TREE
    function get_category_tree() {
        $.post("{:url('ajaxztree')}", function (res) {
            var setting = {
                data: {
                    simpleData: {enable: true}
                },
                callback: {
                    onClick: onClick
                }
            };
            var zNodes = res;
            $(document).ready(function () {
                $.fn.zTree.init($("#tree"), setting, zNodes);
            });
        }, 'json');
    }
    //单击展开关闭
    function onClick(e,treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var url = treeNode.url;
        if(url=='javascript:;'){
            zTree.expandNode(treeNode);
        }
    }
</script>
{/block}